<!-- 客户列表的二级筛选 -->
<script setup lang="ts">
type TabValueType = String | Number
interface TabOption {
  name: String
  value: TabValueType
  count?: String | Number
}
const props = defineProps({
  circleTabOptions: {
    type: Array<TabOption>,
    default: () => [{ name: '', value: 1 }],
  },
  defaultTab: {
    type: String || Number || undefined,
    default: undefined,
  },
})
const emit = defineEmits(['change'])
const activeCircleTab = ref<TabValueType>()

function circleTabChange(circleTabValue: TabValueType) {
  activeCircleTab.value = circleTabValue
  emit('change', activeCircleTab.value)
}
onMounted(() => {
  activeCircleTab.value = props.defaultTab ? props.defaultTab : props.circleTabOptions?.[0].value
})
</script>

<template>
  <div class="sub-tab">
    <div v-for="circleTab in circleTabOptions" :key="circleTab.value" class="sub-tab-item"
      :class="{ active: activeCircleTab === circleTab.value }" @click="circleTabChange(circleTab.value)">
      {{ circleTab.name }}<span v-if="circleTab.count">({{ circleTab.count }})</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sub-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx;
  background: #fff;

  .sub-tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 64rpx;
    background: #F6F6F6;
    border-radius: 40rpx;
    // font-size: 28rpx;

    &+.sub-tab-item {
      margin-left: 23px;
    }

    &.active {
      background: #1A5FA9;
      color: #fff;
    }
  }
}
</style>
